<template>
    <div class="xuse">
        <h2>VueX基本使用</h2>
        <div class="hr"></div>
        <el-tag effect="dark">main.js中</el-tag>
        <p class="decr">
            1. 引入store文件<br>
                import store from './store';<br>
                <br>
            2. 将store添加进Vue全局<br>
                new Vue({store,})<br>
        </p>
        <div class="hr"></div>
        <el-tag effect="dark">/src/store/index.js中</el-tag>
        <p class="decr">
            <mavon-editor 
                :value="value"
                :subfield="false"
                defaultOpen="preview"
                :toolbarsFlag="false"
                :editable="false"
                :scrollStyle="true"
            />
        </p>
        <div class="hr"></div>
        <el-tag
            effect="dark"
            type="success"
            >
            <a :href="getHref" target="_blank">查看示例代码</a>
        </el-tag>
    </div>
</template>

<script>
import mixinPage from '../VueDemoPages/mixin-page';

export default {
    name: 'Xuse',
    mixins: [mixinPage],
    data() {
        return {
            value: `import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

// 相当于redux中的action
const actions = {};

// 相当于redux中的reducer
const mutations = {};

const state = {};

const store =  new Vuex.Store({
    actions,
    mutations,
    state
})

export default store;`,
        }
    }
}
</script>

<style lang="less" scoped>
@import '../assets/css/mixin-frame.less';
</style>